<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="发表评价" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="margin-top-24 bg-fff flex align-center justify-between padding-24">
			<image style="width: 90rpx;height: 90rpx;border-radius: 10rpx;" :src="img"></image>
			<view class="flex1 margin-left-16">
				<view class="fs-28 color-333">{{name}}</view>
				<view class="flex align-center margin-top-16">
					<text class="fs-26 color-666">描述相符</text>
					<image @tap="changeStar" :data-value="index" v-for="(item, index) in 5" :key="index" :src="score > index  ? '../../static/img/star_on.png':'../../static/img/star.png'" class="star_icon"></image>
				</view>
			</view>
		</view>
		<view class="margin-top-24 bg-fff padding-24 solid-bottom">
			<textarea class="fs-24 color-999 w100" placeholder="请写出您的意见和建议~" v-model="q.content"></textarea>
			<view class="flex align-center padding-y-40" style="justify-content: flex-start;">
				<view>
					<image style="width: 160rpx;height: 160rpx;margin-right: 40rpx;"  v-for="(item,index) in  images" :key='index' :src="item"></image>
				</view>
				<view  @tap="uploadImg()">
					<image style="width: 110rpx;height: 110rpx;" src="../../static/img/add_icon.png"></image>
					<view class="fs-28 color-999 margin-top-16">添加图片</view>
				</view>
			</view>
		</view>
		<view class="bg-fff padding-y-24 flex align-center justify-between padding-x-24">
			<label @tap="onTcp" class="flex align-center">
				<radio class="tcp-radio brown" :class="{ checked: isTcp }" :checked="isTcp"></radio><text class="fs-24 color-333">匿名</text>
			</label>
			<text  class="fs-24 color-999">你写的评价会以匿名的形式展现</text>
		</view>
		<view class="bg-fff margin-top-24 padding-30">
			<!-- <view class="fs-28 color-333">二手车行</view> -->
			<view class="flex align-center margin-y-30">
				<text class="fs-24 color-333 w20">消费环境</text>
				<image @tap="changeStar2" :data-value="index" v-for="(item, index) in 5" :key="index" :src="score2 > index  ? '../../static/img/star_on.png':'../../static/img/star.png'" class="star_icon"></image>
			</view>
			<view class="flex align-center margin-y-30">
				<text class="fs-24 color-333 w20">满意度</text>
				<image @tap="changeStar3" :data-value="index" v-for="(item, index) in 5" :key="index" :src="score3 > index  ? '../../static/img/star_on.png':'../../static/img/star.png'" class="star_icon"></image>
			</view>
			
			
		</view>
		<view class="padding-x-60 margin-y-60 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">发布</view>
		</view>
	</view>
</template>

<script>
	import hlUploadImg from '@/components/hlUploadImg/hlUploadImg.vue'
	export default {
		components:{
			hlUploadImg
		},
		data() {
			return {
				q:{
					shop_id:'',
					environment:'',
					service:'',
					satisfied:'',
					imgs:[],
					content:'',
					is_hide:0
				},
				name:'',
				score:'',
				score2:'',
				score3:'',
				images:[],
				img:'',
				isTcp: false, //协议
			}
		},
		onLoad(opt) {
			this.q.shop_id=opt.shop_id
			this.name=opt.name
			console.log(opt)
			this.init()
		},
		methods:{
			onTcp() {
				this.isTcp = !this.isTcp;
				this.q.is_hide = this.isTcp ?'1':'0'
			},
			init(){
				this.$api.shop_info({shop_id:this.q.shop_id}).then(res=>{
					if(res.code==1){
						this.img = res.data.imgs[0]
					}
				})
			},
			//描述相符
			changeStar(e) {
				this.score = Number(e.currentTarget.dataset.value) + 1;
			},
			// 消费环境
			changeStar2(e){
				this.score2 = Number(e.currentTarget.dataset.value) + 1;
			},
			// 满意度
			changeStar3(e){
				this.score3 = Number(e.currentTarget.dataset.value) + 1;
			},
			uploadImg(type){
				var that = this;
				this.$tool.upload().then(res=>{
					that.images.push(res.showImg);
					that.q.imgs.push(res.id);
				})
			},
			submit(){
				if(typeof this.q.imgs == 'object'){
					this.q.imgs = this.q.imgs.join(',');
				}
				if(this.score){
					this.q.service=this.score
				}else{
					this.q.service=0
				}
				if(this.score2){
					this.q.environment=this.score2
				}else{
					this.q.environment=0
				}
				if(this.score3){
					this.q.satisfied=this.score3
				}else{
					this.q.satisfied=0
				}
				this.$api.shop_comment(this.q).then(res=>{
					this.$msg(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack()
						},400)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.img-box{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		border: 1rpx dashed rgba(153, 153, 153, 0.4);
		.img-icon{
			width: 60rpx;
			height: 60rpx;
		}
	}
	/deep/ .uni-radio-input{border-radius: 100%;transform: scale(0.9);}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
	.star_icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>
